<!DOCTYPE html>
<html>
    <head>
        <!-- 页面meta -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>传智健康</title>
        <meta name="description" content="传智健康">
        <meta name="keywords" content="传智健康">
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
        <!-- 引入样式 -->
        <link rel="stylesheet" href="plugins/elementui/index.css">
        <link rel="stylesheet" href="css/login.css">
    </head>
    <body class="hold-transition skin-purple sidebar-mini">
        <div id="app">
            <div class="login-container">
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm" style="top: 50%;left: 35%">
                    <el-form-item prop="name">
                        <el-input type="name" placeholder="用户名" v-model="ruleForm.name" ></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" placeholder="密码" v-model="ruleForm.password"></el-input>
                    </el-form-item>
                    <el-form-item prop="password2">
                        <el-input type="password2" placeholder="确认密码" v-model="ruleForm.password2" ></el-input>
                    </el-form-item>
                    <el-form-item prop="code">
                        <el-input type="code" v-model="ruleForm.code" placeholder="验证码">
                            <template slot="append" >
                                <img id="num" :src="code_url"/>
                                <!--									从Vue中调用名为getImage()的方法-->
                                <a href="javascript:;" @click="getVertifyCode">换一张</a>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
              </div>
        </div>
    </body>
    <!-- 引入组件库 -->
    <script src="./js/vue.js"></script>
    <script src="./plugins/elementui/index.js"></script>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script src="./js/axios-0.18.0.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                var checkName = (rule, value, callback) => {
                    if (!value) {
                        callback(new Error('账号不能为空'));
                    }else {
                        if (this.ruleForm.checkName !== '') {
                            this.$refs.ruleForm.validateField('checkName');
                        }
                        callback();
                    }
                };
                var validatePass = (rule, value, callback) => {
                    if (!value) {
                        callback(new Error('请输入密码'));
                    } else {
                        if (this.ruleForm.checkPass !== '') {
                            this.$refs.ruleForm.validateField('checkPass');
                        }
                        callback();
                    }
                };
                var validatePass2 = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请再次输入密码'));
                    } else if (value !== this.ruleForm.password) {
                        callback(new Error('两次输入密码不一致!'));
                    } else {
                        callback();
                    }
                };
                return {
                    ruleForm: {
                        password: '',
                        name: '',
                        password2: '',
                        code :''
                    },
                    rules: {
                        password: [
                            { validator: validatePass, trigger: 'blur' }
                        ],
                        password2: [
                            { validator: validatePass2, trigger: 'blur' }
                        ],
                        name: [
                            { validator: checkName, trigger: 'blur' }
                        ],
                    },
                    code_url:''
                };
            },
            created () {
                this.getVertifyCode() // 页面初始化从后端加载验证码
            },
            methods: {
                // 获取验证码
                async getVertifyCode () {
                    axios.get("/login/getVertifyCodeImage.do?time="+Math.random()).then((res) => {
                        console.log(res)
                        this.code_url = res.data // 验证码图片渲染
                    })

                },
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            axios.post("/login/register.do",this.ruleForm).then((res) => {
                                console.log(res.data);
                                if(res.data.flag){
                                    this.$message({
                                        message:res.data.message,
                                        type:'success'
                                    });
                                    location.href="/login.html";
                                }else{
                                    this.$message.error(res.data.message);
                                }
                            });
                        } else {
                            console.log('注册失败');
                            return false;
                        }
                    }).finally(()=>{
                        this.getVertifyCode();
                    });
                },
                resetForm(formName) {
                    this.$refs[formName].resetFields();
                }
            }
        })

    </script>
</html>
